<template>
    <div>
        <!-- 查询表单部分 -->
        <el-form :model="params" label-width="100px">
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-form-item label="出库单编号">
                        <el-input v-model="params.salesCode" placehideholder="请输入出库单编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="销售订单编号">
                        <el-input v-model="params.soCode" placehideholder="请输入销售订单编号" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="客户名称">
                        <el-input v-model="params.clientName" placehideholder="请输入客户名称" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="出库日期">
                        <el-date-picker v-model="params.salseDate" type="date" placeholder="请选择出库日期" clearable
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetField">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 结束 -->
        <!-- 按钮组 -->
        <el-row>
            <el-col :span="24">
                <el-button type="primary" plain :icon="Plus" @click="openAdd">新增</el-button>
                <el-button type="success" plain :disabled="updateDisabled" :icon="EditPen"
                    @click="openUpdate">修改</el-button>
                <el-button type="danger" plain :disabled="deleteDisabled" :icon="Delete"
                    @click="deleteSales">删除</el-button>
            </el-col>
        </el-row>
        <!-- 结束 -->
        <!-- 表格部分 -->
        <el-row>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column align="center" type="selection" :selectable="selectable" width="40" />
                <el-table-column align="center" label="出库单编号" property="salseCode" width="200" />
                <el-table-column align="center" property="salseName" label="出库单名称" />
                <el-table-column align="center" property="soCode" label="销售订单编号" />
                <el-table-column align="center" property="clientCode" label="客户编码" />
                <el-table-column align="center" property="clientName" label="客户名称" />
                <el-table-column align="center" property="salseDate" label="出库日期" />
                <el-table-column align="center" label="操作" width="150">
                    <template #default="scope">
                        <div v-if="scope.row.status !== 'FINISHED'">
                            <el-button class="el-button-mini" link type="primary" size="small" :icon="EditPen"
                                @click="openUpdate(index, scope.row)">修改</el-button>
                            <el-button class="el-button-mini" link type="primary" size="small" :icon="Delete"
                                @click="deleteRow(index, scope.row)">删除</el-button>
                            <el-button class="el-button-mini" link type="primary" size="small" :icon="VideoPlay"
                                @click="outboundShipments(index, scope.row)">执行出库</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 结束 -->
        <!-- 自定义组件 新增窗口-->
        <add :addDialogVisible="addDialogVisible" @update:addDialogVisible="handleAddDialogVisibleChange" />
        <!-- 结束 -->
        <update :updateDialogVisible="updateDialogVisible" :salesOutbound="salesOutbound"
            @update:updateDialogVisible="handleUpdateDialogVisibleChange" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Plus, EditPen, Delete, Search, Refresh, VideoPlay } from '@element-plus/icons-vue'
import { findSalesOutbound, deleteSalesOutbound, querySalesOutbound,shipments } from '@/apis/index.js';
import add from '@/components/SalesOutbound/add.vue';
import update from '@/components/SalesOutbound/update.vue';
import { ElMessage } from 'element-plus'
// 定义一个查询参数
const params = ref({
    pageNum: 1,
    pageSize: 10,
    salesCode: null,
    soCode: null,
    clientName: null,
    salseDate: null
})
// 定义表格数据
const tableData = ref([])  //表格数据
const pageResult = ref({}) //分页数据
const salseIds = ref([])  // 批量删除
const salesOutbound = ref({}) // 修改数据对象
//定义状态区
const addDialogVisible = ref(false) //新增窗口
const updateDialogVisible = ref(false) //修改窗口
const deleteDisabled = ref(true) //删除按钮
const updateDisabled = ref(true) //修改按钮


// 事件监听
//打开新增窗口
const openAdd = () => {
    addDialogVisible.value = true
}

//打开修改窗口
const openUpdate = async (index, row) => {
    updateDialogVisible.value = true
    const salseId = row?.salseId || salseIds.value[0]
    salesOutbound.value = await querySalesOutbound(salseId)
}

//批量删除
const deleteSales = async () => {
    await deleteSalesOutbound(salseIds.value)
    handleSearch()
}

//单行删除
const deleteRow = async (index, row) => {
    salseIds.value.push(row.salseId)
    await deleteSalesOutbound(salseIds.value)
    handleSearch()
}

//执行出库
const outboundShipments = async (index,row) => {
    const res = await querySalesOutbound(row.salseId)
    if(!(res.wmProductSalseLines.length > 0)){
        ElMessage.error("请先添加出库产品信息")
        return 
    }
    await shipments(row)
    ElMessage.success("执行出库成功")
    await handleSearch()
}

// 新增窗口关闭事件
const handleAddDialogVisibleChange = (val) => {
    addDialogVisible.value = val
    handleSearch()
}

// 修改窗口关闭事件
const handleUpdateDialogVisibleChange = (val) => {
    updateDialogVisible.value = val
    handleSearch()
}

//表格多选框全部都可以选中
const selectable = () => true;

//参数查询
const handleSearch = async () => {
    pageResult.value = await findSalesOutbound(params.value)
    tableData.value = pageResult.value.records
}
//重置查询条件
const resetField = () => {
    params.value = {
        pageNum: 1,
        pageSize: 10,
        salesCode: null,
        soCode: null,
        clientName: null,
        salseDate: null
    }
}

//处理选中
const handleSelectionChange = (val) => {
    updateDisabled.value = !(val.length == 1)
    deleteDisabled.value = !val.length
    salseIds.value = val.map(item => item.salseId)
}
//加载数据
onMounted(async () => {
    pageResult.value = await findSalesOutbound(params.value)
    tableData.value = pageResult.value.records
})

</script>

<style scoped></style>
